import React from "react";
import { useEffect, useState } from "react";
import "./Broadcast.scss";
import { get_broadcast } from "../../utils/api";
import { HeartOutlined } from "@ant-design/icons";
function Broadcast() {
  // 保存大触直播数据
  const [broadcastData, setBroadcastData] = useState();
  // 保存日期字符串
  const [dateStr, setDateStr] = useState([]);
  // 保存时间字符串
  const [timeStr, setStr] = useState([]);
  useEffect(() => {
    async function broadcast() {
      let data = await get_broadcast();
      console.log("大触直播数据", data.live);
      data.live.map((item) => {
        console.log(item);
        dateStr.push(item.begin_at.split(" ").slice(0, 1).join(","));
        timeStr.push(item.begin_at.split(" ").slice(1, 2).join(","));
      });
      setBroadcastData(data.live);
    }
    broadcast();
  }, []);
  console.log("dateStr", dateStr);
  console.log(broadcastData && broadcastData[0]);
  return (
    <div className="Broadcast">
      <div className="top">
        <span>大触直播</span>
        <i>查看更多&gt;</i>
      </div>
      <div className="Broadcast_con">
        {/* <img src={"https://ss.lanqb.com/"+broadcastData&&broadcastData[0].profile.avatar} alt="" /> */}
        {broadcastData &&
          broadcastData.slice(0, 1).map((item,i) => (
            <div className="first_item" key={item.id}>
              <div className="course_author">
                <img
                  src={"https://ss.lanqb.com/" + item.profile.avatar}
                  alt=""
                />
                <span>{item.profile.nickname}</span>
              </div>
              <b>{item.title}</b>
              <div className="video">
                <video src=""></video>
                <img
                  src="https://player.polyv.net/script/images/button-play.png"
                  alt=""
                />
                <span>第{item.periods}期</span>
              </div>
              <div className="first_bottom">
                <span>
                  时间：
                  {dateStr && dateStr[i].split("-").slice(1, 2)}月
                  {dateStr && dateStr[i].split("-").slice(2, 3)}日&nbsp;
                  {timeStr && timeStr[i].split(":").slice(0, 1)}:
                  {timeStr && timeStr[i].split(":").slice(1, 2)}
                </span>
                <em>{item.statistic.purchases}人感兴趣</em>
              </div>
            </div>
          ))}
        <div className="bottom_con">
          {broadcastData &&
            broadcastData.slice(1, 3).map((item,i) => (
              <div className="item" key={item.id}>
                <div className="course_author">
                  <img
                    src={"https://ss.lanqb.com/" + item.profile.avatar}
                    alt=""
                  />
                  <span>{item.profile.nickname}</span>
                </div>
                <b>{item.title}</b>
                <div className="img">
                  <img
                    src={"https://ss.lanqb.com/" + item.posters.web}
                    alt=""
                  />
                  <span>第{item.periods}期</span>
                </div>
                <div className="bottom">
                  <span>
                  时间：
                  {dateStr && dateStr[i+1].split("-").slice(1, 2)}月
                  {dateStr && dateStr[i+1].split("-").slice(2, 3)}日&nbsp;
                  {timeStr && timeStr[i+1].split(":").slice(0, 1)}:
                  {timeStr && timeStr[i+1].split(":").slice(1, 2)}
                  </span>
                  <p>
                    <HeartOutlined />
                    {item.statistic.purchases}
                  </p>
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  );
}
export default Broadcast;
